<template>
  <div
    class="ToggleTheme cursor-pointer"
    :class="[appStore.isDeep ? 'deep' : 'light', radius ? 'radius' : '']"
    @click="appStore.toggleDeep"
  ></div>
</template>
<script setup lang="jsx">
import { useAppStore } from '@/store'
const appStore = useAppStore()
defineOptions({
  name: 'ToggleTheme',
})
defineProps({
  radius: {
    type: Boolean,
    default: false,
  },
})
</script>
<style lang="scss" scoped>
.ToggleTheme {
  &.light {
    width: 44px;
    height: 44px;
    background: url(@/assets/images/light-theme-toggle.png) no-repeat;
    &:hover {
      &.radius {
        border-radius: 50%;
      }
      background-color: #f4f5f7;
      border-radius: 8px;
    }
  }
  &.deep {
    width: 38px;
    height: 38px;
    background: url(@/assets/images/deep-theme-toggle.png) no-repeat;
    &:hover {
      background-image: url(@/assets/images/deep-theme-toggle-hover.png);
    }
  }
}
</style>
